<template>
  <!-- <el-drawer title="属性面板" size="350px" class="property-panel" :modal="false" :show-close="true" ref="propertyPanel" :visible.sync="infoShow" :with-header="false"> -->
  <!-- <transition name="el-zoom-in-center"> -->
    <!-- <div class="property-panel transition-box" v-show="infoShow" ref="propertyPanel"> -->
      <el-form :inline="true" :model="form"  label-position="left" label-width="100px" size="small">
        <el-form-item label="节点ID" size="small">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="节点名称" size="small">
          <el-input v-model="form.name" :disabled="form.name==''" @input="nameChange"></el-input>
        </el-form-item>
        <el-form-item label="节点颜色" size="small">
          <!-- <el-color-picker
            v-model="form.color"
            :disabled="form.name==''"
            @active-change="colorChange"
          ></el-color-picker> -->
          <el-radio-group v-model="form.color"  @change="colorChange" :disabled="form.name==''">
            <el-radio-button label="#000000"  style="background:black">黑色 </el-radio-button>
            <el-radio-button label="#FF0000"   style="background:red">红色</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    <!-- </div> -->
    <!--  </el-drawer> -->
  <!-- </transition> -->
</template>

<script>
export default {
  name: "PropertyPanel",
  props: {
    modeler: {
      type: Object,
      required: true
    },
  //   form:{
  //     type: Object
  //   },
  //   element:{
  //     type: Object
  //   }
  },
  computed: {
    // element(){

    // },
    // element: {
    //   get() {
    //     return this.$store.state.element
    //   },
    //   set(newVal) {
    //     this.$store.state.element = newVal
    //   }
    // },
    // modeler: {
    //   get() {
    //     return this.$store.state.modeler
    //   },
    //   set(newVal) {
    //     this.$store.state.modeler = newVal
    //   }
    // },
    // form: {
    //   get() {
    //     return this.$store.state.form
    //   },
    //   set(newVal) {
    //     this.$store.state.form = newVal
    //   }
    // },
    userTask() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:UserTask";
    },
    sequenceFlow() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:SequenceFlow";
    }
  },
  data() {
    return {
      infoShow: false,
      form: {
        id: "",
        name: "",
        color: null
      },
      element:{},
      // modeler:{}
      // form: {
      //   id: "",
      //   name: "",
      //   color: null
      // },
      // element: {}
      //   users: [
      //     {
      //       value: "zhangsan",
      //       label: "张三"
      //     },
      //     {
      //       value: "lisi",
      //       label: "李四"
      //     },
      //     {
      //       value: "wangwu",
      //       label: "王五"
      //     }
      //   ],
      //   roles: [
      //     {
      //       value: "manager",
      //       label: "经理"
      //     },
      //     {
      //       value: "personnel",
      //       label: "人事"
      //     },
      //     {
      //       value: "charge",
      //       label: "主管"
      //     }
      //   ]
    };
  },
  created(){
    this.form = this.$store.state.property.form
    this.element = this.$store.state.property.element
  },
  mounted() {
    this.handleModeler()

    // this.modeler = this.$store.state.modeler
  },
  watch:{
    form:function(){
      this.$store.state.property.form = this.form
    }
  },
  methods: {
    handleModeler() {

      //  监听节点属性变化
      this.modeler.on("element.changed", e => {
        const { element } = e;
        if (!element) return;
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name;
          this.form = { ...this.form };
        }
      });
    },
    // 属性面板名称，更新回流程节点
    nameChange(name) {
      const modeling = this.modeler.get("modeling");
      modeling.updateLabel(this.element, name);
    },
    // 属性面板颜色，更新回流程节点
    colorChange(color) {
      const modeling = this.modeler.get("modeling");
      modeling.setColor(this.element, {
        fill: null,
        stroke: color
      });
      modeling.updateProperties(this.element, { color: color });
    },
    // 在这里我们封装一个通用的更新节点属性的方法
    updateProperties(properties) {
      const modeling = this.modeler.get("modeling");
      modeling.updateProperties(this.element, properties);
    }
  }
};
</script>

<style lang="scss" scoped>
.property-panel {
  form {
    padding: 20px 15px;
  }
}
</style>
